<template>
  <div
    class="v-editor-element-appliedStereotype g-jc-sb"
    style="overflow: hidden"
  >
    <div
      class="g-flex-1"
      style="overflow: hidden"
    >
      <div
        v-for="(item, index) of valueDataList"
        :key="index"
        class="g-pd-l-8 g-one-line"
        @contextmenu="propertyModelContextMenu($event, item)"
      >
        <span style="display: flex; align-items: center">
          <span v-if="encrypted">
            {{ desensitize(locale.getTByKey(`modelConfig.${item.name}`, item.name)) }}
          </span>
          <template v-else>
            <img
              class="g-m-r-4"
              style="height: 16px"
              :src="item.icon"
            />
            <span v-if="item.name">{{ locale.getTByKey(`modelConfig.${item.name}`, item.name) }}</span>
          </template>
        </span>
      </div>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      style="line-height: 14px"
      class="g-pd-4 g-flex-0"
    >
      <img
        src="statics/icons/app/iconmore.png"
        style="cursor: pointer"
        @click="showStereotypeModel"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, inject, Ref } from "vue";
import { ModelValue, PropertyRow } from "../../types";
import { actionManager } from "@/action/ActionManager";
import { propertyModelContextMenu } from "../propertyUtil";
import { ActionKey } from "@/action/ActionKey";
import { ShowElementsAndStereotypesAcion } from "@/modules/model/actions/shape/ShowElementsAndStereotypesAcion";
import { desensitize } from "@/util/common";
import { locale } from "@/util/locale";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
  selected: boolean;
  encrypted?: boolean;
}>();

const valueDataList = computed(() => {
  return (props.row.value || []) as ModelValue[];
});

const showStereotypeModel = () => {
  const action = actionManager.getAction(ActionKey.showElementsAndStereotypes) as ShowElementsAndStereotypesAcion;
  action?.run(props.row.modelId, props.row.key);
};
</script>
<style lang="scss">
.v-editor-element-appliedStereotype-menu {
  .el-checkbox--small {
    height: 16px;
    line-height: 16px;
  }
}
</style>
